<link rel="stylesheet" href="https://file.viplgw.cn/ui/thinku-ielts-new/element-ui/index.css">
<link rel="stylesheet" href="/cn/css/mock/writeDetail.css?v=1.1">
<script src="https://file.viplgw.cn/ui/public/js/jquery-3.2.1.min.js"></script>
<script src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>
<script src="https://file.viplgw.cn/ui/thinku-ielts-new/element-ui/index.js"></script>
<script src="https://file.viplgw.cn/ui/public/js/jquery.cookie.js"></script>


<section class="exerciseBox" id="readBox">
    <div class="guideTop">
        <div>
            <div class="guideTopLeft">
                <img class="logoLeft" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/12@2x.png" alt="">
                 <span>雅思机考<?php echo $public['type'] == 1 ? '听力' : ($public['type'] == 2 ? '阅读' : '全科') ?>
                     模拟卷<?php echo \YII::$app->params['noToStr'][$public['mockcate_id']]?></span>
                <?php if ($public['type'] != 2) { ?>
                    <a :href="'/mock/detail.html?resultid='+resultid+'&subject=listen'" >Listening</a>
                <?php }
                if ($public['type'] != 1) {?>
                    <a :href="'/mock/detail.html?resultid='+resultid+'&subject=read'">Reading</a>
                <?php }
                if ($public['type'] == 5) {?>
                    <a href="javascript:;"  class="on">Writing</a>
                <?php } ?>
            </div>
            <a href="/mock.html"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/11@2x.png" alt="">Quit</a>
        </div>
    </div>
    <div class="exerciseCenter" id="exerciseCenter">
        <!--第四步 做题-->
        <div class="steps step4" id="stepExercise" style="margin: 0 auto">
            <div class="quesBox" v-for="(itemBox,indexBox) in dataQuestion.data">
                <div class="partTitle" v-show="currentPart == indexBox ">
                    <div v-html="itemBox.article.article"></div>
                </div>
                <div class="quesContent" v-show="currentPart == indexBox ">
                    <div class="fullText">
                        <div v-html="itemBox.article.description"></div>
                        <img style="max-width: 100%;display: block;margin: 20px 0"
                             :src="'https://www.thinkuprep.com/'+itemBox.image" alt="">
                    </div>
                    <div class="articleText">
                        <div class="reportBox">
                            <p v-if="itemBox.isCollect != 1"
                               @click="collectPart(itemBox.article.content_id,5,itemBox.article.cate_id,indexBox)">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/39@2x.png" alt="">
                                收藏题目
                            </p>
                            <p v-else @click="uncollectPart(itemBox.collectId,indexBox)">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/41@2x.png" alt="">
                                取消收藏
                            </p>
                            <p @click="feedPart(itemBox.article.content_id)">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/40@2x.png" alt="">
                                报错反馈
                            </p>
                        </div>
                        <p style="">我的答案:</p>
                        <textarea class="userAnswer" readonly :value="itemBox.topic[0].son[0].my_answer" ref="focusTextarea"></textarea>
                        <p style="">参考答案:</p>
                        <textarea class="userAnswer" readonly :value="itemBox.topic[0].son[0].description" ref="focusTextarea"></textarea>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="footNav">
                <div class="footNavCover">
                    <div class="quesNumCover" id="quesNumCover">
                        <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                        <div class="zoning" v-for="(item,index) in AnswerArry">
                            <p>Part {{index + 1}}：</p>
                            <a href="javascript:void(0)"
                               :class="{'quesNum':index>-1, 'fulfil': item.answer!='', 'notSure': item.status == 1, 'doNow': index == currentPart }"
                               @click="welter(item.pid,item.content_id,item.th,item.status,index)">
                                {{index + 1}}
                            </a>
                        </div>
                    </div>
                    <div class="turnBtn">
                        <a href="javascript:void(0)" class="prevBtn" @click="prev()">
                            <img :src="currentPart != 0?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/31@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/34@2x.png'"
                                 alt="">
                        </a>
                        <a href="javascript:void(0)" class="nextBtn" @click="next()">
                            <img :src="currentPart != 1?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/35@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/32@2x.png'"
                                 alt="">
                        </a>
                    </div>
                </div>
            </div>
            <!-- 举报反馈 -->
            <div class="feedBackBox" v-show="showFeed">
                <div class="feedBackCenter">
                    <img @click="showFeed=false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/16@2x.png" alt="">
                    <p>报错反馈</p>
                    <div class="singleZt feedBackZt">
                        <div class="singleCover">
                            <input id="cc_1" type="radio" class="radioBox" v-model="feedType" value="1">
                            <label for="cc_1"><span style="margin-right: 5px;"></span><b>题干有误</b></label>
                        </div>
                        <div class="singleCover">
                            <input id="cc_2" type="radio" class="radioBox" v-model="feedType" value="2">
                            <label for="cc_2"><span style="margin-right: 5px;"></span><b>答案有误</b></label>
                        </div>
                        <div class="singleCover">
                            <input id="cc_3" type="radio" class="radioBox" v-model="feedType" value="3">
                            <label for="cc_3"><span style="margin-right: 5px;"></span><b>格式有误</b></label>
                        </div>
                        <div class="singleCover">
                            <input id="cc_4" type="radio" class="radioBox" v-model="feedType" value="4">
                            <label for="cc_4"><span style="margin-right: 5px;"></span><b>解析有误</b></label>
                        </div>
                        <div class="singleCover">
                            <input id="cc_5" type="radio" class="radioBox" v-model="feedType" value="5">
                            <label for="cc_5"><span style="margin-right: 5px;"></span><b>其他问题</b></label>
                        </div>
                    </div>
                    <el-input type="textarea" style="width: 80%;margin:20px 10% 0 10%"
                              :autosize="{ minRows: 2, maxRows: 4}" placeholder="请简要描述你遇到的问题，帮助我们定位和解决（选填，200以内）"
                              v-model="feedBackContent">
                    </el-input>
                    <a href="javascript:;" @click="feedSub">提交</a>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    window.writeTest = new Vue({
        el: '#readBox',
        data() {
            return {
                userImage: '',
                userName: '',
                minutes: 60,
                seconds: 0,
                timeLayout: true,
                volume: 75,
                steps: 4,
                showTip: true,
                timeInter: null,
                isStart: false,

                letterArry: [], //序号  26个字母
                dataQuestion: {},//渲染数据
                resultid: '',//
                subject: '',//
                content_id: '',//当前整套题目content_id
                content_btn: '',//当前小题content_id 默认第一题的
                content_btn_status: '',//当前小题目 方形 圆形
                content_pid: '',//当前题目pid 默认第一题的
                totoleQues: 2,//总题目个数
                currentPart: -1,//当前显示的part
                current: 1,//当前正在看的题目序号
                AnswerArry: [],//答题数据
                setInter:'',
                showFeed: false,
                feedId: '',
                feedType: '',
                feedBackContent: '',}
        },
        watch: {

        },
        created() {
            this.resultid = this.getQueryString('resultid')
            this.subject = this.getQueryString('subject')
            this.getData()
        },
        mounted() {
        },
        methods: {
            collectPart(content_id, typeid, catId, index) {
                let that = this;
                $.post('/cn/mock/collection', {
                    content_id: content_id,
                    typeid: typeid,
                    catId: catId,
                }, function (res) {
                    if (res.code == 1) {
                        that.dataQuestion.data[index].isCollect = 1
                        that.dataQuestion.data[index].collectId = res.data.id
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            uncollectPart(id, index) {
                let that = this;
                $.post('/cn/mock/delete-collection', {
                    id: id
                }, function (res) {
                    if (res.code == 1) {
                        that.dataQuestion.data[index].isCollect = 0
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            feedPart(id) {
                this.showFeed = true
                this.feedId = id
            },
            feedSub() {
                let that = this;
                $.post('/cn/mock/report', {
                    contentId: that.feedId,
                    reportType: that.feedType,
                    description: that.feedBackContent,
                    type: 5,
                }, function (res) {
                    if (res.code == 1) {
                        that.showFeed = false
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            getData() {
                let that = this;
                $.get('/cn/mock/detail-data', {
                    resultid: that.resultid,
                    subject: that.subject,
                }, function (res) {
                    if (res.code == 1) {
                        that.initData(res.data);
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            initData(data) {
                let that = this;
                that.dataQuestion = data;
                that.dataQuestion.data.map((item, itemIndex) => {
                    let obj = {};
                    obj.content_id = item.content_id;
                    obj.answer = '';
                    obj.trueAnswer = '';
                    obj.createTime = 0;
                    obj.status = 0;
                    obj.count = 0;
                    that.AnswerArry.push(obj);
                })
                that.currentPart = 0
            },
            //上一题
            prev() {
                this.currentPart = 0;
            },
            //下一题
            next() {
                this.currentPart = 1;
            },
            //按钮点击滚动
            welter(pid, content_id, index, status, part) {
                this.currentPart = part;//当前正在看的篇幅
            },
            getQueryString(name) {
                let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                let r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            },
        },
    });
</script>
